<template>
  <!-- <div>getters：{{ $store.getters.doneTodos }}</div>
  <div>doneTodosCount：{{ doneTodosCount }}</div>
  <div>getTodoById：{{ $store.getters.getTodoById(2) }}</div> -->
  <!-- <div>{{ doneTodos }}</div>
  <div>{{ doneTodosCount }}</div>
  <div>{{ getTodoById(2) }}</div> -->
  <div>{{ doneCount }}</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  // computed: {
  //   doneTodosCount () {
  //     return this.$store.getters.doneTodosCount
  //   }
  // }
  // 当映射的计算属性的名称与 getter 的子节点名称相同时，我们也可以给 `mapGetters` 传入一个字符串数组
  // computed: {
  //   // 使用对象展开运算符将 getter 混入 computed 对象中
  //   ...mapGetters([
  //     'doneTodos',
  //     'doneTodosCount',
  //     'getTodoById'
  //   ])
  // }
  computed: {
    ...mapGetters({
      // 把 `this.doneCOunt` 映射为 `this.$store.getters.doneTodosCOunt`
      doneCount: 'doneTodosCount'
    })
  }
}
</script>

<style>

</style>